<style lang="sass" scoped>
    .top{
        height:440px;
        img{
            display:block;
            width:100%;
            height:100%;
        }
    }
    .cont{
        padding-top:10px;
        background:#e6e6e6;
        .group{
            background:#fff;
            margin-bottom:10px;
            padding:18px 36px;
            .img{
                width:262px;
                height:262px;
                background:#ccc;
                img{
                    display:block;
                    width:100%;
                    height:100%;
                }
            }
            .detail{
                width:388px;
                margin-left:30px;
                flex-direction: column;
                .detail-cont{
                    flex:1;
                    .name{
                        font-size:28px;
                        color:#3c3c3c;
                    }
                    .title{
                        font-size:22px;
                        color:#3c3c3c;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .paid{
                        font-size: 22px;
                        color: #bebebe;
                    }
                }
                .buy{
                    height: 56px;
                    justify-content: space-between;
                    .price{
                        width: 200px;
                        color: #ff6e6e;
                        .currency{
                            font-size: 22px
                        }
                        .big{
                            font-size: 44px;
                        }
                        .small{
                            font-size: 34px;
                        }
                    }
                    .btn{
                        width: 160px;
                        height: 56px;
                        line-height: 56px;
                        text-align: center;
                        font-size: 34px;
                        background: #fff;
                        color: #ff6e6e;
                        border:1px solid #ff6e6e;
                        &.checked{
                            background: #ff6e6e;
                            color: #fff;
                            border:1px solid #ff6e6e;
                        }
                    }
                }
            }
        }
        // .group:nth-child(2n-1){
        //     .btn{
        //         background: #ff6e6e;
        //         color: #fff;
        //         border:1px solid #ff6e6e;
        //     }
        // }
        // .group:nth-child(2n){
        //     .btn{
        //         background: #fff;
        //         color: #ff6e6e;
        //         border:1px solid #ff6e6e;
        //     }
        // }
    }
</style>
<template>
    <div class="container">
        <div class="top">
            <img :src="imageUrl" alt="">
        </div>
        <div class="cont">
            <router-link :to="{name:'detail',query:{itemCode:item.itemCode}}" tag="div" v-for="(item,i) in list" class="group flex">
                <div class="img">
                    <img :src="item.mainImageUrl" alt="">
                </div>
                <div class="detail flex">
                    <div class="detail-cont">
                        <div class="name">{{item.itemName}}</div>
                        <div class="title">{{item.itemDesc}}</div>
                        <div class="paid">{{item.buyCount}}人付款</div>
                    </div>
                    <div class="buy flex">
                        <div class="price">
                            <span class="currency">￥</span>
                            <span class="big">{{item.price}}</span>
                        </div>
                        <div v-if="productList.includes(item.itemCode)" class="btn checked">加入书袋</div>
                        <div v-else @click.stop="addBook(item)" class="btn">加入书袋</div>
                    </div>
                </div>
            </router-link>
        </div>

        <bookcar></bookcar>
        <totop></totop>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    import bookcar from "commonvue/bookcar";
    import { mapState } from 'vuex'
    export default {
        components: {
            totop,
            bookcar,
        },
        data() {
            return {
                search:{
                    contextId:'',
                    categId:'',//	是	string	类目ID
                    startNum:0,//	是	string	下一页开始值
                },
                end:false,
                list:[],
                imageUrl:[],
                loading:false,
            };
        },
        watch:{
        },
        computed: {
            ...mapState('cart',{
                productList:state=>state.productList
            }),
        },
        created(){
            this.search.categId = this.$route.query.categId;
            this.search.contextId = this.$route.query.contextId;
            document.title=this.$route.query.categName;
        },
        mounted() {
            this.$nextTick(() => {
                if(this.$route.query.categId){
                    this.getList().then(()=>{
                        $(window).scroll(()=>{  
                            var wScrollY = window.scrollY;              // 当前滚动条top值  
                            var wInnerH = window.innerHeight;           // 设备窗口的高度
                            var bScrollH = document.body.scrollHeight;  // body总高度   
                            if (wScrollY + wInnerH >= bScrollH-10) {   
                                if(!this.loading)this.getList();
                            }    
                        });
                    });
                }
            });
        },
        methods: {
            getList(){
                let param = JSON.parse(JSON.stringify(this.search));
                return new Promise((res)=>{
                    this.loading = true;
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/item/getItemListByCateg',
                        data:param,
                        success:(data=>{
                            var list = JSON.parse(JSON.stringify(this.list));
                            list = list.concat(data.data.record);
                            this.list = list;
                            this.search.startNum = data.data.startNum;
                            this.imageUrl = data.data.imageUrl;
                            if(data.data.record<10){
                                this.end = true;
                                 $(window).unbind('scroll')
                            }
                            this.loading = false;
                            res();
                        })
                    })
                })
            },
            addBook(item){
                server.addShoppingCar(item.itemCode)
            }
        },
        
    };
</script>